<template>
  <div :class="$style.container">
    <el-menu  
      :default-active="activeIndex" 
      class="menu" 
      mode="horizontal" 
      @select="handleSelect">
      <el-menu-item index="1">首页</el-menu-item>
      <el-menu-item index="2">电影</el-menu-item>
      <el-menu-item index="3">电视剧</el-menu-item>
      <el-submenu index="4">
        <template slot="title">综艺</template>
        <el-menu-item index="4-1">吐槽大会</el-menu-item>
      </el-submenu>
      <el-submenu index="5">
        <template slot="title">购物</template>
        <el-menu-item index="5-1">淘宝</el-menu-item>
        <el-menu-item index="5-2">京东</el-menu-item>
        <el-menu-item index="5-3">拼多多</el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeIndex: '1'
    }
  },
  methods: {
    handleSelect(key, keyPath) {
      if (key === '4-1') {
        window.location.href = 'https://v.qq.com/detail/8/80844.html'
      } else if (key === '5-1') {
        window.location.href = `https://www.taobao.com/`
      } else if (key === '5-2') {
        window.location.href = `https://www.jd.com/`
      } else if (key === '5-3') {
        window.location.href = `https://www.pinduoduo.com/`
      } else if (key === '1') {
        this.$router.push({
          path: '/'
        })
      } else {
        this.$message({
          type: 'warning',
          message: '暂未开放该功能'
        })
      }
    }
  }
}
</script> 
<style lang="scss" module>
.container {
}
</style>
<style scoped>
.menu >>> .el-submenu.is-active .el-submenu__title {
  border-bottom: none;
}
.menu >>> .el-menu.el-menu--horizontal,
.menu >>> .el-menu {
  border-bottom: none !important;
}
</style>
